<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>position--真等高</title>
</head>
<body>
<div class="box">
  <div class="left">lllllleft</div>
  <div class="center">
    设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果
    <p>但是这个只能通过中间部分的高度来改变整体高度,两边定位的高度不能改变整体高度,只能适应</p>
    <p>也就是说两边高度不能高于容器高度</p>
  </div>
  <div class="right">
      rrrrrrrright
  </div>
</div>
<style>
  .box {
    position: relative;
    min-height: 100px;
  }

  .left, .right {
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .center {
    margin: 0 200px;
    background: rebeccapurple;
    min-height: 300px;
  }
  .left {
    width: 200px;
    left: 0;
    background: blanchedalmond;
  }
  .right {
    right: 200px;
    background: darkolivegreen;
  }
</style>

</body>
</html>